<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>生命周期2</title>
</head>
<body>
  <!--
1. vue对象的生命周期
  1). 初始化显示
    * beforeCreate()
    * created()
    * beforeMount()
    * mounted()
  2). 更新状态
    * beforeUpdate()
    * updated()
  3). 销毁vue实例: vm.$destroy()
    * beforeDestroy()
    * destroyed()
2. 常用的生命周期方法
  created()/mounted(): 发送ajax请求, 启动定时器等异步任务
  beforeDestroy(): 做收尾工作, 如: 清除定时器
-->
<div id="app">
  <button @click="destroyVM">destroy Vue</button>
  <!-- <h2 v-show="isShow">hello world</h2> -->
  <h2 ref="h2" v-show="isShow">
    {{isShow? 'helloWorld':'xxxx'}}
  </h2>
</div>
  <script src="./js/vue.js"></script>
  <script type=text/javascript>
    new Vue({
      // el:'#app',
      data:{
        isShow:true
      },
      beforeCreate() {
        console.log('beforeCreate()',this.isShow)
      },
      created() {
        console.log('created()',this.isShow)
      },
      beforeMount() {
        console.log('beforeMount()',this.isShow)
      },
      mounted() {
        console.log('mounted')
        this.intervalId = setInterval(() => {
          console.log('-----')
          this.isShow = !this.isShow
        }, 3000);
      },
      beforeUpdate() {
        console.log('beforeUpdate()',this.isShow,this.$refs.h2.innerHTML)
      },
      updated() {
        console.log('updated()',this.isShow,this.$refs.h2.innerHTML);
      },
    })
  </script>

</body>
</html>